<template>
  <div class="menu">
    <div
      class="sub-menu"
      v-for="(item, index) in menuItems"
      :key="index"
      :class="actived ? 'actived' : ''"
      @click="handleActived"
    >
      <span>{{ item.name }}</span>
      <ul>
        <li
          class="menu-item"
          v-for="(command, commandIdx) in item.children"
          :key="commandIdx"
        >
          <div
            v-if="command.enName !== 'divider'"
            class="normal"
            @click="handleMenuItemClick(command.enName)"
          >
            <i
              class="icon iconfont"
              :class="command.icon ? command.icon : ''"
            ></i>
            <span class="name">{{ command.name }}</span>
            <span class="shortcut-key">{{ command.shortcutKey }}</span>
          </div>
          <div v-else class="divider"></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import menuItems from "./menuItems";
import EventBus from "../../event-bus/index";
import BusEvents from "../../event-bus/event-types";

export default {
  name: "menu-bar",
  props: {
    actived: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      menuItems,
    };
  },
  methods: {
    handleActived(e) {
      e.stopPropagation();
      // todo: 在父组件中将 actived 改为 true
      this.$emit("changeActived", true);
    },
    handleMenuItemClick(enName) {
      // todo: 根据 enName 执行不同的处理函数，通过 EventBus 将事件的处理弄到 顶层组件 上
      console.log(enName);
      switch (enName) {
        case "rename":
          break;
        case "clone":
          break;
        case "downAsPNG":
          EventBus.$emit(BusEvents.COMMAND_DOWNLOAD_AS_PNG);
          break;
        case "close":
          break;
        case "undo":
          EventBus.$emit(BusEvents.COMMAND_UNDO);
          break;
        case "redo":
          EventBus.$emit(BusEvents.COMMAND_REDO);
          break;
        case "copy":
          EventBus.$emit(BusEvents.COMMAND_COPY);
          break;
        case "cut":
          EventBus.$emit(BusEvents.COMMAND_CUT);
          break;
        case "paste":
          EventBus.$emit(BusEvents.COMMAND_PASTE);
          break;
        case "zoomIn":
          EventBus.$emit(BusEvents.COMMAND_ZOOM_IN);
          break;
        case "zoomOut":
          EventBus.$emit(BusEvents.COMMAND_ZOOM_OUT);
          break;
        case "resetZoom":
          EventBus.$emit(BusEvents.COMMAND_RESET_ZOOM);
          break;
        case "backgroundColor":
          EventBus.$emit(BusEvents.COMMAND_BACKGROUND_COLOR);
          break;
        case "showGrid":
          EventBus.$emit(BusEvents.COMMAND_SHOW_GRID);
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.menu {
  width: 100%;
  height: 30px;
  padding-left: 30px;
  border-bottom: 1px solid #cccccc;
  font-size: 13px;

  display: flex;
  align-items: center;

  .sub-menu {
    height: 30px;
    padding: 0 10px;
    cursor: pointer;
    line-height: 30px;
    position: relative;
    user-select: none;

    &:hover {
      background-color: #eeeeee;
      // background-color: rgba(211, 211, 211, 0.4);
    }

    & > ul {
      position: absolute;
      top: 30px;
      left: 0;
      width: 220px;
      padding: 4px 0;
      border-radius: 2px;
      background-color: #fff;
      // background-color: rgba(105, 105, 105, 1);
      box-shadow: 1px 1px 1px 1px #dcdcdc;
      visibility: hidden;
      z-index: 9;

      .menu-item {
        &:hover {
          background-color: #eeeeee;
          // background-color: rgba(211, 211, 211, 0.4);
        }

        .normal {
          height: 30px;
          display: flex;

          .icon {
            width: 30px;
            height: 30px;
            margin-left: 2px;

            display: flex;
            justify-content: center;
          }

          .name {
            margin-left: 2px;
            margin-right: auto;
          }

          .shortcut-key {
            margin-right: 10px;
            color: #777777;
          }
        }

        .divider {
          border-top: 1px solid #cccccc;
          margin: 4px 0;
        }
      }
    }

    &.actived:hover > ul {
      visibility: visible;
    }
  }
}

ul,
li {
  list-style: none;
}
</style>
